{extend name="template/base" /}
{block name="style"}
<link rel="stylesheet" href="__LIB__/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
{/block}
{block name="content"}
<div style="margin-left: 1vw;margin-right: 1vw;margin-top:100px;" class="cl pd-5 bg-1 bk-gray mt-20">
    <span class="l">
        <a href="javascript:;" onclick="category_del()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 删除所选栏目</a>
        <a class="btn btn-primary radius" onclick="categoryAdd()"><i class="Hui-iconfont">&#xe600;</i> 添加子栏目</a>
        <a class="btn btn-primary radius" href="{:url('admin/Demo/addcolumn')}"><i class="Hui-iconfont">&#xe600;</i> 添加根栏目</a>
    </span>
</div>

<table class="table">
    <tr>
        <td style="padding-left: 4vw" width="200" class="va-t"><ul id="treeDemo" class="ztree"></ul></td>
        <td class="va-t">
            <div class="page-container">
                <form action="" method="post" class="form form-horizontal" id="category-edit">
                    <input type="text" hidden class="input-text" id="id" name="id">
                    <input type="text" hidden class="input-text" value="0" id="parentId" name="parentId">
                    <input type="text" hidden class="input-text" value="1" id="status" name="status">
                    <input type="text" hidden class="input-text" value="true" id="isParent" name="isParent">
                    <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-2">
                            <span class="c-red">*</span>
                            栏目名称：</label>
                        <div class="formControls col-xs-6 col-sm-6">
                            <input type="text" class="input-text" value="" placeholder="" id="name" name="name">
                        </div>
                    </div>
                    <!-- <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-2">
                            <span class="c-red">*</span>
                            类目编号：</label>
                        <div class="formControls col-xs-6 col-sm-6">
                            <input type="text" class="input-text" value="" placeholder="" id="itemno" name="itemno" disabled="disabled">
                        </div>
                    </div> -->
                    <!-- <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-2">
                            <span class="c-red">*</span>
                            类目值：</label>
                        <div class="formControls col-xs-6 col-sm-6">
                            <input type="text" class="input-text" value="" placeholder="" id="value" name="value" disabled="disabled">
                        </div>
                    </div> -->
                      
            
                    <div class="row cl">
                        <div class="col-9 col-offset-2">
                            <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交修改&nbsp;&nbsp;">
                        </div>
                    </div>
                </form>
            </div>
        </td>
    </tr>
</table>
{/block}
{block name="script"}
<script type="text/javascript" src="__LIB__/zTree/js/jquery.ztree.all.js"></script>
<script type="text/javascript" src="__LIB__/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="__LIB__/h-ui/js/H-ui.min.js"></script>
<script src="__STATIC__/js/jquery.validate.js"></script>
<script>
   

    var isParent=true,id="",name="",parentsid;

    var setting = {
        view: {
            dblClickExpand: true,
            showLine: true,
            selectedMulti: false
        },
        data: {
            simpleData: {
                enable:true,
                idKey: "id",
                pIdKey: "pId",
                rootPId: ""
            }
        },
        async: {
            enable: true,
            url: "/admin/Demo/column",
            type: "GET",
            contentType: "application/json",
            autoParam: ["id"]
        },
        callback: {
            beforeClick: function(treeId, treeNode) {
                console.log(treeId+"123");
                console.log(treeNode);
                parentsid =treeNode.id;
                $("#name").val(treeNode.name);
                $("#id").val(treeNode.id);
                $("#argsConfig").val(treeNode.argsConfig);
                $("#remark").val(treeNode.remark);
                $("#parentId").val(treeNode.pId);
                $("#value").val(treeNode.value);
                $("#itemno").val(treeNode.itemno);
                $("#sortOrder").val(treeNode.sortOrder);
                if($("#parentId").val()==""){
                    $("#parentId").val(0);
                }
                if(treeNode.pId!=0){
                    $("#parentName").val(treeNode.getParentNode().name);
                }
                changeSwitch2(treeNode.status);
                id=treeNode.id;
                name=treeNode.name;
                console.log(treeNode.isParent);
                if (treeNode.isParent) {
                    console.log('1');
                    isParent=true;
                    changeSwitch1(1);
                    return false;
                } else {
                    console.log('0');
                    isParent=false;
                    changeSwitch1(0);
                    return true;
                }
            }
        }
    };

    function changeSwitch1(value){
        // console.log(value)
        if(value==1){
            $('#parentSwitch').bootstrapSwitch('setState', true);
        }else{
            $('#parentSwitch').bootstrapSwitch('setState', false);
        }
    }

    $('#parentSwitch').on('switch-change', function (e, data) {
        if(data.value==true){
            $("#isParent").val(true);
        }else{
            $("#isParent").val(false);
        }
    });

    function changeSwitch2(value){
        if(value==1){
            $('#mySwitch').bootstrapSwitch('setState', true);
        }else{
            $('#mySwitch').bootstrapSwitch('setState', false);
        }
    }

    $('#mySwitch').on('switch-change', function (e, data) {
        if(data.value==true){
            $("#status").val(1);
        }else{
            $("#status").val(0);
        }
    });

    initTree();

    function initTree(){
        var t = $("#treeDemo");
        t = $.fn.zTree.init(t, setting);
        demoIframe = $("#testIframe");
        var zTree = $.fn.zTree.getZTreeObj("tree");
        // treeObj.expandAll(true);
    }

    //保存提交
    $("#category-edit").validate({
        rules:{
            name:{
                required:true,
                minlength:1,
                maxlength:25,
            },
            
        },
        onkeyup:false,
        focusCleanup:false,
        success:"valid",
        submitHandler:function(form){
            // console.log($("#parentId").val());
            var index = layer.load(3);
            $(form).ajaxSubmit({
                url: "/admin/Demo/updateMenu",
                type: "POST",
                success: function(data) {
                    // console.log(data)
                    layer.close(index);
                    var datas = JSON.parse(data);
                    if(datas.success==true){
                        initTree();
                        msgSuccess("编辑成功!");
                    }else{
                        layer.alert('编辑失败! '+datas.msg, {title: '错误信息',icon: 2});
                    }
                },
                error:function(XMLHttpRequest) {
                    layer.close(index);
                    layer.alert('数据处理失败! 错误码:'+XMLHttpRequest.status,{title: '错误信息',icon: 2});
                }
            });
        }
    });

    var isRoot=false;

    /*子分类-添加*/
    function categoryAdd(){
        if(!isParent){
            layer.alert('请点击选择一父栏目! ', {title: '错误信息',icon: 0});
            return;
        }
        window.location.href = "addcolumn?id="+parentsid; 
    }


    /*分类-删除*/
    function category_del() {
        var id=$("#id").val();
        // console.log(id)
        if(id<0 || id==""){
            layer.alert('请点击选择要删除的栏目! ', {title: '错误信息',icon: 0});
            return;
        }
        layer.confirm('确认要删除所选的\''+name+'\'栏目吗？',{icon:0},function(index){
            var index = layer.load(3);
            $.ajax({
                url: '/admin/Demo/deleteMenu',
                type: 'POST',
                data:{
                    'id':id,
                },
                success: function(data) {
                    var datas = JSON.parse(data);
                    // console.log(datas)
                    layer.close(index);
                    if(datas.success==true){
                        initTree();
                        msgSuccess("删除成功!");
                    }else{
                        layer.alert('删除失败! '+datas.msg, {title: '错误信息',icon: 2});
                    }
                },
                error: function (XMLHttpRequest) {
                    layer.close(index);
                    layer.alert('数据处理失败! 错误码:' + XMLHttpRequest.status, {
                        title: '错误信息',
                        icon: 2
                    });
                }
            });
        });
    }

    function msgSuccess(content){
        layer.alert(content,{icon: 1});
    }

</script>
{/block}